<template>
  <!-- 首充留存报表 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="retainDataList" @query="getRetainDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getRetainDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column prop="date" label="日期时间" align="center" width="150">
            <template slot-scope="scope">
              <span v-show="!scope.$index">汇总</span>
              <span v-show="scope.$index">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="!scope.$index">汇总</span>
              <span v-show="scope.$index"><span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】</span>{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reg_num" label="注册人数" align="center" width="120"/>
          <el-table-column prop="type" label="类型" align="center" width="100">
            <template slot-scope="scope">
              <span v-show="!scope.$index">汇总</span>
              <el-tag v-show="scope.$index" :type="scope.row.type==1?'success':scope.row.type==2?'danger':'warning'">{{ typeLabel(scope.row.type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="首日首充人数(首充率)" align="center" width="200">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.num }} 【<div class="colorRed width60px">{{ scope.row.retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="two_num" label="次日(首充留存率)" align="center" width="200">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.two_num }} 【<div class="colorRed width60px">{{ scope.row.two_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="three_num" label="三日(首充留存率)" align="center" width="200">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.three_num }} 【<div class="colorRed width60px">{{ scope.row.three_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="four_num" label="四日(首充留存率)" align="center" width="180">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.four_num }} 【<div class="colorRed width60px">{{ scope.row.four_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="five_num" label="五日(首充留存率)" align="center" width="180">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.five_num }} 【<div class="colorRed width60px">{{ scope.row.five_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="six_num" label="六日(首充留存率)" align="center" width="180">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.six_num }} 【<div class="colorRed width60px">{{ scope.row.six_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="seven_num" label="七日(首充留存率)" align="center" width="180">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.seven_num }} 【<div class="colorRed width60px">{{ scope.row.seven_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fifteen_num" label="十五日(首充留存率)" align="center" width="180">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.fifteen_num }} 【<div class="colorRed width60px">{{ scope.row.fifteen_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="thirty_num" label="三十日(首充留存率)" align="center" width="180">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.thirty_num }} 【<div class="colorRed width60px">{{ scope.row.thirty_retention }}%</div>】
              </div>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getRetainDataList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getRetention
} from '@/api/statistics'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'rechargeRetain',
  components: {
    SearchTable
  },
  data () {
    return {
      channelData:this.$store.state.commonState.channelDataArray,
      listQuery: {
        page: 1,
        size: 50,
        agent_id:'',
        type: 3,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      listLoading: true,
      typeData:[
        {label:'首充留存',value:3},
      ],
      retainDataList: [],
      currentTotal: 0,
    }
  },
  created () {
    // this.getRetainDataList();
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getRetainDataList();
  },
  methods: {
    // 首充留存
    async getRetainDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.retainDataList = []
      that.checkedItem = null
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response = await  getRetention(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
            if(item.reg_num){
              item.retention=that.$public.mathNumberDividePercent(item.num,item.reg_num)
            }else{
              item.retention=that.$public.mathNumberMultiply(item.num,100)
            }
            if(item.num){
              item.two_retention=that.$public.mathNumberDividePercent(item.two_num,item.num)
              item.three_retention=that.$public.mathNumberDividePercent(item.three_num,item.reg_num)
              item.four_retention=that.$public.mathNumberDividePercent(item.four_num,item.reg_num)
              item.five_retention=that.$public.mathNumberDividePercent(item.five_num,item.reg_num)
              item.six_retention=that.$public.mathNumberDividePercent(item.six_num,item.reg_num)
              item.seven_retention=that.$public.mathNumberDividePercent(item.seven_num,item.reg_num)
              item.fifteen_retention=that.$public.mathNumberDividePercent(item.fifteen_num,item.reg_num)
              item.thirty_retention=that.$public.mathNumberDividePercent(item.thirty_num,item.reg_num)
            }else{
              item.two_retention=that.$public.mathNumberMultiply(item.two_num,100)
              item.three_retention=that.$public.mathNumberMultiply(item.three_num,100)
              item.four_retention=that.$public.mathNumberMultiply(item.four_num,100)
              item.five_retention=that.$public.mathNumberMultiply(item.five_num,100)
              item.six_retention=that.$public.mathNumberMultiply(item.six_num,100)
              item.seven_retention=that.$public.mathNumberMultiply(item.seven_num,100)
              item.fifteen_retention=that.$public.mathNumberMultiply(item.fifteen_num,100)
              item.thirty_retention=that.$public.mathNumberMultiply(item.thirty_num,100)
            }
          })
          that.retainDataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 类型展示
    typeLabel(cellValue){
      if(cellValue){
        return (this.typeData.find((item) => item.value === cellValue)?.label || "-");
      }else{
        return '--'
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        agent_id:'',
        type: 3,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      }
      this.getRetainDataList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
